﻿<%@ include file="/WEB-INF/work/start.jspf"%><html>
<head>
<%@ include file="/WEB-INF/jspf/meta.jspf"%>
<title>固定表头</title>
<%@ include file="/WEB-INF/jspf/css.jspf" %>
<link href="${pageContext.request.contextPath}/css/fixed_table_rc.css" rel="stylesheet">
<style type="text/css">
    #main-content { min-height: 600px; overflow: hidden; }			
    #example_d1 { width: 95%; }
    #example_d2 { width: 95%; }
    #example_d3 { width: 95%; }

    #example_d3 .dwrapper { width: 795px; }

    .dwrapper #fixed_hdr1 { width: 1500px; }
    #fixed_hdr1 th { font-weight: bold; }
    #fixed_hdr1 th, td { border-width: 1px; border-style: solid; padding: 2px 4px; }

    .dwrapper { padding: 2px; overflow: hidden; vertical-align: top; }
    .dwrapper div.tblWrapper { height: 300px; overflow: auto; margin-top: 10px;}
    .dwrapper div.ft_container { width: 100%; margin-top: 10px; }		

    body { line-height: 1.5em; }
    #main-content { min-width: 990px; }
</style>
</head>
<body>
<jsp:include page="/WEB-INF/jspf/menu.jsp">
    <jsp:param name="current" value="work" />
</jsp:include>
<c:set value="78" var="columns" />
<c:set value="260" var="rows" />
<a href="#" id="apply-plugin" class="btn btn-primary">Apply Plugin</a>
<div class="tblWrapper">
        <table id="fixed_hdr1" class="table table-bordered">
            <thead>
                <tr>
                    <c:forEach var="c" begin="0" end="${columns}">
                    <th>Column ${c}</th>
                    </c:forEach>
                </tr>
            </thead>
            <tbody>
                <c:forEach var="r" begin="0" end="${rows}">
                    <tr>
                    <c:forEach var="c" begin="0" end="${columns}">
                        <td>Row ${r} Column ${c}</td>
                    </c:forEach>
                    </tr>
                </c:forEach>
            </tbody>
        </table>
    </div>
<%@ include file="/WEB-INF/jspf/js.jspf" %>
<script src="${pageContext.request.contextPath}/js/fixed_table_rc.js"></script>
<script src="${pageContext.request.contextPath}/js/sortable_table.js"></script>
<script type="text/javascript">
$("#apply-plugin").click(function(e){
    e.preventDefault();
    var columns = [];
    for(var i=0;i<79;i++){
        columns.push({width:200});
    }
    
    $('#fixed_hdr1').fxdHdrCol({
	fixedCols: 2,
	width:     "80%",
	height:    400,
	colModal: columns					
    });

});
</script>
</body>
</html>